<!DOCTYPE html>
<html>
<head>
	<title>Collapse</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse">点击查看</a>
		<div class="collapse" id="collapseExample">
			<div class="well">
				Hello
			</div>
		</div>

		<div class="panel-group" id="accordion" role="tablist">
			<div class="panel panel-primary">
				<div class="panel-heading" role="tab" id="headingOne">
					<h4 class="panel-title">
				<!-- data-parent="#accordion"是要依赖于它的父级控件的 -->
						<a href="#collapseOne" data-toggle="collapse" data-parent="#accordion">item1</a>
					</h4>
				</div>
				<!-- class="collapse in"添加in类为了展开 -->
				<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel">
					<div class="panel-body">
						欢迎来到这里！！！
						欢迎来到这里！！！
						欢迎来到这里！！！
						欢迎来到这里！！！
					</div>
				</div>
			</div>			

			<div class="panel panel-primary">
				<div class="panel-heading" role="tab" id="headingTwo">
					<h4 class="panel-title">
				<!-- data-parent="#accordion"是要依赖于它的父级控件的 -->
						<a href="#collapseTwo" data-toggle="collapse" data-parent="#accordion">item1</a>
					</h4>
				</div>
				<!-- class="collapse in"添加in类为了展开 -->
				<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel">
					<div class="panel-body">
						欢迎来到这里！！！
						欢迎来到这里！！！
						欢迎来到这里！！！
						欢迎来到这里！！！
					</div>
				</div>
			</div>			

			<div class="panel panel-primary">
				<div class="panel-heading" role="tab" id="headingThree">
					<h4 class="panel-title">
				<!-- data-parent="#accordion"是要依赖于它的父级控件的 -->
						<a href="#collapseThree" data-toggle="collapse" data-parent="#accordion">item1</a>
					</h4>
				</div>
				<!-- class="collapse in"添加in类为了展开 -->
				<div id="collapseThree" class="panel-collapse collapse" role="tabpanel">
					<div class="panel-body">
						欢迎来到这里！！！
						欢迎来到这里！！！
						欢迎来到这里！！！
						欢迎来到这里！！！
					</div>
				</div>
			</div>			
		</div>
	</div>

<script type="text/javascript" src="js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
		// 被隐藏之后显示
	// $('#accordion').on('hidden.bs.collapse', function () {
	// 	// 锁定的是最外层的id
	// 	alert('hello');
	// })
</script>
</body>
</html>